<template>
  <div>
    <Tag color="red">文件名:{{ state.fileName }}</Tag>
  </div>
  <iframe
      style="border: none"
      :width="state.newTableWidth"
      :height="state.newTableHeight"
      :src="state.fileUri">
  </iframe>
</template>

<script setup>
import {FileService} from "@/api/file";
import {getCurrentInstance, nextTick, onMounted, reactive, ref} from "vue";
import config from '@/config/global.config';

const {proxy} = getCurrentInstance();

const state = reactive({
  newTableWidth: 0,
  newTableHeight: 0,
  fileUri: '',
  fileName: ''
})

const computedWidthHeight = () => {
  state.newTableHeight = window.innerHeight - 180;
  state.newTableWidth = window.innerWidth - 230;
}

const getDetail = async (e) => {
  const param = {id: e.id}
  const {data} = await FileService.GetFileInfoById(param);
  if (data.code === 200) {
    state.fileUri = config.backImgSrc + data.data.uri;
    state.fileName = data.data.filename;
  } else {
    proxy.$Message.error({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        Promise.reject();
      }
    })
  }
}

onMounted(async () => {
  window.onresize = () => {
    computedWidthHeight();
  };
  await nextTick(() => {
    computedWidthHeight();
  })
})

defineExpose({
  getDetail
})

</script>

<style scoped>

</style>
